<template>
  <div>
    <div ref="echarts" style="width: 100%;height: 270px;" />
  </div>
</template>

<script>
// /* eslint-disable */

import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      const myCharts = echarts.init(this.$refs.echarts)
      // console.log(myCharts)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: ' {b} :  {d}%'
        },

        legend: {
          orient: 'vertical',
          right: '18%',
          top: '15%',
          icon: 'circle',
          // // 重写legend显示样式
          formatter: function(name) {
            var data = option.series[0].data
            var total = 0
            var tarValue
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            var p = (tarValue / total * 100).toFixed(2)
            return name + ' ' + ' ' + ' ' + ' ' + ' ' + p + '%' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + tarValue
          },
          data: ['拣货区       ', '出库区        ', '暂存库存    ', '进货暂存区 ', '出货暂存区 '],
          itemWidth: 15, // 设置图例图形的宽
          itemHeight: 15,
          itemBorderRadius: 10
        },
        color: ['#4278f6', '#80d2ef', '#62708f', '#f0b43e', '#e8782f'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '68%',
            center: ['30%', '45%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 1048, name: '拣货区       ' },
              { value: 735, name: '出库区        ' },
              { value: 580, name: '暂存库存    ' },
              { value: 484, name: '进货暂存区 ' },
              { value: 300, name: '出货暂存区 ' }
            ],
            // 中间的空隙
            itemStyle: {
              borderWidth: 1.4,
              borderColor: '#fff'

            },
            emphasis: {
              itemStyle: {
                // shadowBlur: 10
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myCharts.setOption(option)
      window.addEventListener('resize', myCharts.resize)
    }
  }
}
</script>

<style>

</style>
